<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();
const PUBLIC_URL = import.meta.env.VITE_APP_IMAGE_URL;
const jumpPage = pathName => {
    router.push({ name: pathName });
};
</script>

<template>
    <ul class="menu">
        <li class="menu__item" @click="jumpPage('infoView')">
            <img
                :src="PUBLIC_URL + '/icon-menu03.svg'"
                class="menu__item__icon"
                alt="item.text"
            />
            <div class="menu__item__text">信息查看</div>
        </li>
    </ul>
</template>

<style lang="scss" scoped>
.menu {
    display: flex;
    flex-wrap: wrap;

    &__item {
        height: 100rem;
        width: 33.3%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        &__icon {
            width: 100%;
            height: 30rem;
            background-size: cover;
            object-fit: scale-down;
            margin-bottom: 10rem;
        }

        &__text {
            text-align: center;
            font-size: 14rem;
        }
    }
}
</style>
